<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Viewport metatags -->
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<!-- iOS webapp metatags -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- iOS webapp icons -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-retina.png" />

<!-- CSS Reset -->
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<!--  Fluid Grid System -->
<link rel="stylesheet" type="text/css" href="css/fluid.css" media="screen" />
<!-- Theme Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/dandelion.theme.css" media="screen" />
<!--  Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/dandelion.css" media="screen" />
<!-- Demo Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/demo.css" media="screen" />

<!-- jQuery JavaScript File -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<!-- jQuery-UI JavaScript Files -->
<script type="text/javascript" src="jui/js/jquery-ui-1.8.20.min.js"></script>
<script type="text/javascript" src="jui/js/jquery.ui.timepicker.min.js"></script>
<script type="text/javascript" src="jui/js/jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" type="text/css" href="jui/css/jquery.ui.all.css" media="screen" />

<!-- Plugin Files -->

<!-- FileInput Plugin -->
<script type="text/javascript" src="js/jquery.fileinput.js"></script>
<!-- Placeholder Plugin -->
<script type="text/javascript" src="js/jquery.placeholder.js"></script>
<!-- Mousewheel Plugin -->
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<!-- Scrollbar Plugin -->
<script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
<!-- Tooltips Plugin -->
<script type="text/javascript" src="plugins/tipsy/jquery.tipsy-min.js"></script>
<link rel="stylesheet" href="plugins/tipsy/tipsy.css" />

<!-- Validation Plugin -->
<script type="text/javascript" src="plugins/validate/jquery.validate.min.js"></script>

<!-- jGrowl Plugin -->
<script type="text/javascript" src="plugins/jgrowl/jquery.jgrowl.min.js"></script>
<link rel="stylesheet" href="plugins/jgrowl/jquery.jgrowl.css" media="screen" />

<!-- Demo JavaScript Files -->
<script type="text/javascript" src="js/demo/demo.ui.js"></script>

<!-- Core JavaScript Files -->
<script type="text/javascript" src="js/core/dandelion.core.js"></script>

<!-- Customizer JavaScript File (remove if not needed) -->
<script type="text/javascript" src="js/core/dandelion.customizer.js"></script>

<title>Dandelion Admin - UI Elements</title>

</head>

<body>

	<!-- Dandelion Customizer (remove if not needed) -->
    <div id="da-customizer">
    	<div id="da-customizer-content">
        	<ul>
            	<li>
                	<span class="da-customizer-title">Background Pattern</span>
                    <span id="da-customizer-body-bg"></span>
                </li>
                <li>
                	<span>Header Pattern</span>
                    <span id="da-customizer-header-bg"></span>
                </li>
                <li>
                	<span>
                    	Layout
                        <span title="This functionality can only provide you the CSS for background and header patterns. Instructions to switch between fixed or fluid layout can be found in the documentation." class="da-tooltip-w da-customizer-tooltip">
                    		[?]
                        </span>
                    </span>
                    <ul id="da-customizer-layouts" class="clearfix">
                    	<li>
                        	<input type="radio" id="da-customizer-fluid" name="da-layout" checked="checked" />
                        	<label for="da-customizer-fluid">Fluid</label>
                        </li>
                    	<li>
                        	<input type="radio" id="da-customizer-fixed" name="da-layout" />
                            <label for="da-customizer-fixed">Fixed</label>
                        </li>
                    </ul>
                </li>
            </ul>
            <div id="da-customizer-button">
            	<button class="da-button red">Get CSS</button>
            </div>
        </div>
        <span id="da-customizer-pulldown"></span>
    </div>
    
	<!-- Main Wrapper. Set this to 'fixed' for fixed layout and 'fluid' for fluid layout' -->
	<div id="da-wrapper" class="fluid">
    
        <!-- Header -->
        <div id="da-header">
        
        	<div id="da-header-top">
                
                <!-- Container -->
                <div class="da-container clearfix">
                    
                    <!-- Logo Container. All images put here will be vertically centere -->
                    <div id="da-logo-wrap">
                        <div id="da-logo">
                            <div id="da-logo-img">
                                <a href="dashboard.html">
                                    <img src="images/logo.png" alt="Dandelion Admin" />
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Header Toolbar Menu -->
                    <div id="da-header-toolbar" class="clearfix">
                        <div id="da-user-profile">
                            <div id="da-user-avatar">
                                <img src="images/pp.jpg" alt="" />
                            </div>
                            <div id="da-user-info">
                                John Doe
                                <span class="da-user-title">Creative Director</span>
                            </div>
                            <ul class="da-header-dropdown">
                                <li class="da-dropdown-caret">
                                    <span class="caret-outer"></span>
                                    <span class="caret-inner"></span>
                                </li>
                                <li class="da-dropdown-divider"></li>
                                <li><a href="dashboard.html">Dashboard</a></li>
                                <li class="da-dropdown-divider"></li>
                                <li><a href="#">Profile</a></li>
                                <li><a href="#">Settings</a></li>
                                <li><a href="#">Change Password</a></li>
                            </ul>
                        </div>
                        <div id="da-header-button-container">
                        	<ul>
                            	<li class="da-header-button notif">
                                	<span class="da-button-count">32</span>
                                	<a href="#">Notifications</a>
                                    <ul class="da-header-dropdown">
                                        <li class="da-dropdown-caret">
                                            <span class="caret-outer"></span>
                                            <span class="caret-inner"></span>
                                        </li>
                                        <li>
                                        	<span class="da-dropdown-sub-title">Notifications</span>
                                        	<ul class="da-dropdown-sub">
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                            <a class="da-dropdown-sub-footer">
                                            	View all notifications
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            	<li class="da-header-button message">
                                	<span class="da-button-count">5</span>
                                	<a href="#">Messages</a>
                                    <ul class="da-header-dropdown">
                                        <li class="da-dropdown-caret">
                                            <span class="caret-outer"></span>
                                            <span class="caret-inner"></span>
                                        </li>
                                        <li>
                                        	<span class="da-dropdown-sub-title">Messages</span>
                                        	<ul class="da-dropdown-sub">
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                            <a class="da-dropdown-sub-footer">
                                            	View all messages
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            	<li class="da-header-button logout">
                                	<a href="index.html">Logout</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                                    
                </div>
            </div>
            
            <div id="da-header-bottom">
                <!-- Container -->
                <div class="da-container clearfix">
                
                	<div id="da-search">
                    	<form>
                        	<input type="text" placeholder="Search..." />
                        </form>
                    </div>
                	
                    <!-- Breadcrumbs -->
                    <div id="da-breadcrumb">
                        <ul>
                            <li><a href="dashboard.html"><img src="images/icons/black/16/home.png" alt="Home" />Dashboard</a></li>
                            <li class="active"><span>UI Elements</span></li>
                        </ul>
                    </div>
                    
                </div>
            </div>
        </div>
    
        <!-- Content -->
        <div id="da-content">
            
            <!-- Container -->
            <div class="da-container clearfix">
            
                <!-- Sidebar -->
                <div id="da-sidebar-separator"></div>
                <div id="da-sidebar">
                
                    <!-- Main Navigation -->
                    <div id="da-main-nav" class="da-button-container">
                        <ul>
                            <li>
                            	<a href="dashboard.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/home.png" alt="Dashboard" />
                                    </span>
                                	Dashboard
                                </a>
                            </li>
                            <li>
                            	<a href="#">
                                	<!-- Nav Notification -->
                                    <span class="da-nav-count">32</span>
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/graph.png" alt="Charts" />
                                    </span>
                                	Statistics and Charts
                                </a>
                                <ul class="closed">
                                	<li><a href="statistic.html">Statistic Widgets</a></li>
                                	<li><a href="charts.html">Chart Gallery</a></li>
                                </ul>
                            </li>
                            <li>
                            	<a href="calendar.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/day_calendar.png" alt="Calendar" />
                                    </span>
                                	Calendar
                                </a>
                            </li>
                            <li>
                            	<a href="file.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/file_cabinet.png" alt="File Handling" />
                                    </span>
                                	File Handling
                                </a>
                            </li>
                            <li>
                            	<a href="table.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/table_1.png" alt="Table" />
                                    </span>
                                	Table
                                </a>
                            </li>
                            <li>
                            	<a href="#">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/create_write.png" alt="Form" />
                                    </span>
                                	Form
                                </a>
                                <ul>
                                	<li><a href="form-layouts.html">Layouts</a></li>
                                	<li><a href="form-elements.html">Elements</a></li>
                                	<li><a href="form-validation.html">Validation</a></li>
                                </ul>
                            </li>
                            <li class="active">
                            	<a href="ui.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/settings.png" alt="" />
                                    </span>
                                    UI Elements
                                </a>
                            </li>
                            <li>
                            	<a href="widgets.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/cog_4.png" alt="Widgets" />
                                    </span>
                                    Widgets
                                </a>
                            </li>
                            <li>
                            	<a href="#">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/word_documents_1.png" alt="Layout and Typography" />
                                    </span>
                                    Layout and Typography
                                </a>
                                <ul class="closed">
                                	<li><a href="grids.html">Grids and Panels</a></li>
                                	<li><a href="typography.html">Typography</a></li>
                                </ul>
                            </li>
                            <li>
                            	<a href="gallery.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/images_2.png" alt="Gallery" />
                                    </span>
                                    Gallery
                                </a>
                            </li>
                            <li>
                            	<a href="error.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/alert.png" alt="Error Pages" />
                                    </span>
                                    Error Page (404)
                                </a>
                            </li>
                            <li>
                            	<a href="icons.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/pacman.png" alt="Icons" />
                                    </span>
                                    Icons
                                </a>
                            </li>
                        </ul>
                    </div>
                    
                </div>
                
                <!-- Main Content Wrapper -->
                <div id="da-content-wrap" class="clearfix">
                
                	<!-- Content Area -->
                	<div id="da-content-area">
                                            
                    	<div class="grid_4">
                        	<div class="da-panel">
                            	<div class="da-panel-header">
                                	<span class="da-panel-title">
                                        <img src="images/icons/color/ui_slider_2.png" alt="" />
                                        Slider
                                    </span>
                                    
                                </div>
                                <div class="da-panel-content">
                                	<form class="da-form">
                                    	<div class="da-form-row">
                                        	<label>Default Slider</label>
                                            <div class="da-form-item">
                                            	<div id="da-ex-slider"></div>
                                            </div>
                                        </div>
                                    	<div class="da-form-row">
                                        	<label>Range Slider</label>
                                            <div class="da-form-item">
                                                <span id="da-ex-slider-range-info" class="formNote left">Price Range: <span class="da-highlight">$75 - $300</span></span>
                                            	<div id="da-ex-slider-range"></div>
                                            </div>
                                        </div>
                                    	<div class="da-form-row">
                                        	<label>Range Slider with Fixed Minimum</label>
                                            <div class="da-form-item">
                                            	<span id="da-ex-slider-range-fixed-info" class="formNote left">Maximum Price: <span class="da-highlight">$37</span></span>
                                            	<div id="da-ex-slider-range-fixed"></div>
                                            </div>
                                        </div>
                                    	<div class="da-form-row">
                                        	<label>Equalizer</label>
                                            <div class="da-form-item">
                                                <div id="da-slider-equalizer">
                                                    <span>88</span>
                                                    <span>77</span>
                                                    <span>55</span>
                                                    <span>33</span>
                                                    <span>40</span>
                                                    <span>45</span>
                                                    <span>70</span>
                                                </div>
                                            </div>
                                        </div>
                                    	<div class="da-form-row">
                                        	<label>Color Sliders</label>
                                            <div class="da-form-item">
                                            	<div class="da-ex-color-slider green"></div>
                                            	<div class="da-ex-color-slider red"></div>
                                            	<div class="da-ex-color-slider blue"></div>
                                            	<div class="da-ex-color-slider orange"></div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                    	<div class="grid_4">
                        	<div class="da-panel">
                            	<div class="da-panel-header">
                                	<span class="da-panel-title">
                                        <img src="images/icons/black/16/loading_bar.png" alt="" />
                                        Progressbar
                                    </span>
                                    
                                </div>
                                <div class="da-panel-content">
                                	<form class="da-form">
                                    	<div class="da-form-row">
                                        	<label>Default Progressbar</label>
                                            <div class="da-form-item">
                                            	<div id="da-ex-pb"></div>
                                            </div>
                                        </div>
                                    	<div class="da-form-row">
                                        	<label>Animated Progressbar (FF and Webkit only)</label>
                                            <div class="da-form-item">
                                            	<span class="formNote left">
                                                	<a href="#" id="da-ex-pba-trigger">Randomize value</a>
                                                    (modern browsers will display a CSS3 animated progressbar)
                                                </span>
                                            	<div id="da-ex-pba" class="animated blue"></div>
                                            </div>
                                        </div>
                                    	<div class="da-form-row">
                                        	<label>Color Progressbars</label>
                                            <div class="da-form-item">
                                            	<div class="da-ex-color-pb green"></div>
                                            	<div class="da-ex-color-pb red"></div>
                                            	<div class="da-ex-color-pb blue"></div>
                                            	<div class="da-ex-color-pb orange"></div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                    	<div class="grid_2">
                        	<div class="da-panel">
                            	<div class="da-panel-header">
                                	<span class="da-panel-title">
                                        <img src="images/icons/black/16/computer_imac.png" alt="" />
                                        Dialog
                                    </span>
                                    
                                </div>
                                <div class="da-panel-content with-padding">
                                	<div style="text-align:center">
                                        <button id="da-ex-dialog" class="da-button pink">Default UI Dialog</button>
                                        <button id="da-ex-dialog-modal" class="da-button blue">Modal UI Dialog</button>
                                        <button id="da-ex-dialog-form" class="da-button green">Form in UI Dialog</button>
                                    </div>
                                    
                                    <div id="da-ex-dialog-div" style="display:none;">
                                    	<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
                                        <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
                                    </div>
                                    
                                    <div id="da-ex-dialog-form-div" class="no-padding">
                                        <form id="da-ex-dialog-form-val" class="da-form">
                                            <div id="da-validate-error" class="da-message error" style="display:none;"></div>
                                            <div class="da-form-inline">
                                                <div class="da-form-row">
                                                    <label>Required Validation</label>
                                                    <div class="da-form-item large">
                                                        <input type="text" name="reqField" />
                                                    </div>
                                                </div>
                                                <div class="da-form-row">
                                                    <label>File Input Validation</label>
                                                    <div class="da-form-item large">
                                                    	<span class="formNote">JPEG, JPG, PNG, GIF only</span>
                                                        <input type="file" name="picture" class="da-custom-file" />
                                                    	<label for="picture" class="error" generated="true" style="display:none;"></label>
                                                    </div>
                                                </div>
                                                <div class="da-form-row">
                                                    <label>Date Validation</label>
                                                    <div class="da-form-item large">
                                                    	<input id="da-ex-dialog-dp" type="text" readonly="readonly" name="dateField" />
                                                    </div>
                                                </div>
                                                <div class="da-form-row">
                                                    <label>Radiobutton Validation</label>
                                                    <div class="da-form-item large">
                                                        <ul class="da-form-list">
                                                            <li><input id="gender_male" type="radio" name="gender" /> <label for="gender_male">Male</label></li>
                                                            <li><input id="gender_female" type="radio" name="gender" /> <label for="gender_female">Female</label></li>
                                                        </ul>
                                                        <label for="gender" class="error plain" generated="true" style="display:none"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    	<div class="grid_2">
                        	<div class="da-panel">
                            	<div class="da-panel-header">
                                	<span class="da-panel-title">
                                        <img src="images/icons/color/microphone.png" alt="" />
                                        Growl
                                    </span>
                                    
                                </div>
                                <div class="da-panel-content with-padding">
                                	<div style="text-align:center">
                                        <button id="da-ex-growl" class="da-button pink">Default Growl</button>
                                        <button id="da-ex-growl-1" class="da-button blue">Sticky Growl</button>
                                        <button id="da-ex-growl-2" class="da-button green">Growl with Header</button>
                                    </div>
                                </div>
                            </div>
                        </div>                        
                        
                    	<div class="grid_4">
                        	<div class="da-panel">
                            	<div class="da-panel-header">
                                	<span class="da-panel-title">
                                        <img src="images/icons/black/16/computer_imac.png" alt="" />
                                        UI Buttons
                                    </span>
                                    
                                </div>
                                <div class="da-panel-content">
                                	<form class="da-form">
                                    	<div class="da-form-row">
                                        	<label>UI Buttons</label>
                                            <div class="da-form-item">
                                                <button class="da-ex-buttons">A button element</button>
                                                <input type="submit" value="A submit button" class="da-ex-buttons" />
                                                <a href="#" class="da-ex-buttons">An anchor</a>
                                            </div>
                                        </div>
                                    	<div class="da-form-row">
                                        	<label>Radio UI Buttons</label>
                                            <div class="da-form-item">
                                                <div id="da-ex-buttons-radio">
                                                    <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
                                                    <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
                                                    <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
                                                </div>
                                            </div>
                                        </div>
                                    	<div class="da-form-row">
                                        	<label>Checkbox UI Buttons</label>
                                            <div class="da-form-item">
                                                <div id="da-ex-buttons-checkbox">
                                                    <input type="checkbox" id="check1" /><label for="check1">B</label>
                                                    <input type="checkbox" id="check2" /><label for="check2">I</label>
                                                    <input type="checkbox" id="check3" /><label for="check3">U</label>
                                                </div>
                                            </div>
                                        </div>
                                    	<div class="da-form-row">
                                        	<label>Icon UI Buttons</label>
                                            <div class="da-form-item large">
                                            	<div id="da-ex-buttons-icon">                                            
                                                    <button>Button with icon only</button>
                                                    <button>Button with icon on the left</button>
                                                    <button>Button with two icons</button>
                                                    <button>Button with two icons and no text</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                    	<div class="grid_4">
                        	<div class="da-panel">
                            	<div class="da-panel-header">
                                	<span class="da-panel-title">
                                        <img src="images/icons/color/data.png" alt="" />
                                        Datepicker
                                    </span>
                                </div>
                                <div class="da-panel-content">
                                	<form class="da-form">
                                    	<div class="da-form-row">
                                        	<label>Default Datepicker</label>
                                            <div class="da-form-item">
                                            	<input id="da-ex-datepicker" type="text" />
                                            </div>
                                        </div>
                                    	<div class="da-form-row">
                                        	<label>Inline Datepicker</label>
                                            <div class="da-form-item">
                                            	<div id="da-ex-datepicker-inline"></div>
                                            </div>
                                        </div>
                                    	<div class="da-form-row">
                                        	<label>Datetime Picker</label>
                                            <div class="da-form-item">
                                            	<input id="da-ex-datetimepicker" type="text" />
                                            </div>
                                        </div>
                                    	<div class="da-form-row">
                                        	<label>Time Picker</label>
                                            <div class="da-form-item">
                                            	<input id="da-ex-timepicker" type="text" />
                                            </div>
                                        </div>
                                    	<div class="da-form-row">
                                        	<label>Datepicker with Week</label>
                                            <div class="da-form-item">
                                            	<input id="da-ex-datepicker-week" type="text" />
                                            </div>
                                        </div>
                                    	<div class="da-form-row">
                                        	<label>Datepicker with Multiple Months</label>
                                            <div class="da-form-item">
                                            	<input id="da-ex-datepicker-months" type="text" />
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                        <div class="grid_2">
                        	<div class="da-panel">
                            	<div class="da-panel-header">
                                	<span class="da-panel-title">
                                        <img src="images/icons/color/ui_tab_content.png" alt="" />
                                        Tabs
                                    </span>
                                    
                                </div>
                                <div id="da-ex-tabs">
                                    <ul>
                                        <li><a href="#tabs-1">Nunc tincidunt</a></li>
                                        <li><a href="#tabs-2">Proin dolor</a></li>
                                        <li><a href="#tabs-3">Aenean lacinia</a></li>
                                    </ul>
                                    <div id="tabs-1">
                                        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
                                    </div>
                                    <div id="tabs-2">
                                        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
                                    </div>
                                    <div id="tabs-3">
                                        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
                                        <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="grid_2">
                            <div id="da-ex-tabs-plain">
                                <ul>
                                    <li><a href="#tabs-1">Nunc tincidunt</a></li>
                                    <li><a href="#tabs-2">Proin dolor</a></li>
                                    <li><a href="#tabs-3">Aenean lacinia</a></li>
                                </ul>
                                <div id="tabs-1">
                                    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
                                </div>
                                <div id="tabs-2">
                                    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
                                </div>
                                <div id="tabs-3">
                                    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
                                    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="clear"></div>
                        
                        <div class="grid_2">
                        	<div class="da-panel">
                            	<div class="da-panel-header">
                                	<span class="da-panel-title">
                                        <img src="images/icons/color/ui_saccordion.png" alt="" />
                                        Accordion
                                    </span>
                                    
                                </div>
                                <div id="da-ex-accordion">
                                    <h3><a href="#">Section 1</a></h3>
                                    <div>
                                        <p>
                                        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                                        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                                        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                                        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
                                        </p>
                                    </div>
                                    <h3><a href="#">Section 2</a></h3>
                                    <div>
                                        <p>
                                        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                                        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                                        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
                                        suscipit faucibus urna.
                                        </p>
                                    </div>
                                    <h3><a href="#">Section 3</a></h3>
                                    <div>
                                        <p>
                                        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
                                        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
                                        ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
                                        lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
                                        </p>
                                        <ul>
                                            <li>List item one</li>
                                            <li>List item two</li>
                                            <li>List item three</li>
                                        </ul>
                                    </div>
                                    <h3><a href="#">Section 4</a></h3>
                                    <div>
                                        <p>
                                        Cras dictum. Pellentesque habitant morbi tristique senectus et netus
                                        et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
                                        faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
                                        mauris vel est.
                                        </p>
                                        <p>
                                        Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
                                        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                                        inceptos himenaeos.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="grid_2">
                            <div id="da-ex-accordion-plain">
                                <h3><a href="#">Section 1</a></h3>
                                <div>
                                    <p>
                                    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                                    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                                    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                                    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
                                    </p>
                                </div>
                                <h3><a href="#">Section 2</a></h3>
                                <div>
                                    <p>
                                    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                                    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                                    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
                                    suscipit faucibus urna.
                                    </p>
                                </div>
                                <h3><a href="#">Section 3</a></h3>
                                <div>
                                    <p>
                                    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
                                    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
                                    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
                                    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
                                    </p>
                                    <ul>
                                        <li>List item one</li>
                                        <li>List item two</li>
                                        <li>List item three</li>
                                    </ul>
                                </div>
                                <h3><a href="#">Section 4</a></h3>
                                <div>
                                    <p>
                                    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
                                    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
                                    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
                                    mauris vel est.
                                    </p>
                                    <p>
                                    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
                                    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                                    inceptos himenaeos.
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="clear"></div>
                        
                    	<div class="grid_2">
                        	<div class="da-panel">
                            	<div class="da-panel-header">
                                	<span class="da-panel-title">
                                        <img src="images/icons/black/16/settings.png" alt="" />
                                        Buttons
                                    </span>                    
                                </div>
                                <div class="da-panel-content with-padding">
                                    <h4>Small Buttons</h4>
                                    <p>
                                        <input type="button" class="da-button red small" value="Red Button" />
                                        <input type="button" class="da-button green small" value="Green Button" />
                                        <input type="button" class="da-button blue small" value="Blue Button" />
                                    </p>
                                    <p>
                                        <input type="button" class="da-button pink small" value="Pink Button" />
                                        <input type="button" class="da-button orange small" value="Orange Button" />
                                        <input type="button" class="da-button gray small" value="Gray Button" />
                                    </p>
                                    
                                    <h4>Regular Buttons</h4>
                                    <p>
                                        <input type="button" class="da-button red" value="Red Button" />
                                        <input type="button" class="da-button green" value="Green Button" />
                                        <input type="button" class="da-button blue" value="Blue Button" />
                                    </p>
                                    <p>
                                        <input type="button" class="da-button pink" value="Pink Button" />
                                        <input type="button" class="da-button orange" value="Orange Button" />
                                        <input type="button" class="da-button gray" value="Gray Button" />
                                    </p>
                                    
                                    <h4>Large Buttons</h4>
                                    <p>
                                        <input type="button" class="da-button red large" value="Red Button" />
                                        <input type="button" class="da-button green large" value="Green Button" />
                                        <input type="button" class="da-button blue large" value="Blue Button" />
                                    </p>
                                    <p>
                                        <input type="button" class="da-button pink large" value="Pink Button" />
                                        <input type="button" class="da-button orange large" value="Orange Button" />
                                        <input type="button" class="da-button gray large" value="Gray Button" />
                                    </p>
                                    
                                    <h4>Buttons with Icons</h4>
                                    <p>
                                    	<a href="#" class="da-button red">
                                            <img src="images/icons/color/wand.png" alt="" />
                                        	Red button
                                        </a>
                                    	<a href="#" class="da-button green">
                                            <img src="images/icons/color/chart_bar.png" alt="" />
                                        	Green button
                                        </a>
                                    	<a href="#" class="da-button blue">
                                            <img src="images/icons/color/control_stop.png" alt="" />
                                        	Blue button
                                        </a>
                                    </p>
                                    <p>
                                    	<a href="#" class="da-button pink">
                                        	Pink button
                                            <img src="images/icons/color/image_2.png" alt="" />
                                        </a>
                                    	<a href="#" class="da-button orange">
                                        	Orange button
                                            <img src="images/icons/color/calendar_2.png" alt="" />
                                        </a>
                                    	<a href="#" class="da-button gray">
                                        	Gray button
                                            <img src="images/icons/color/bomb.png" alt="" />
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                    	<div class="grid_2">
                        	<div class="da-panel">
                            	<div class="da-panel-header">
                                	<span class="da-panel-title">
                                        <img src="images/icons/color/lightbulb.png" alt="" />
                                        Tooltips
                                    </span>
                                    
                                </div>
                                <div class="da-panel-content with-padding" style="text-align:center">
                                    <div style="margin-bottom:1em;">
                                    	<input type="button" class="da-tooltip-nw da-button red" value="North West Gravity" title="This is a tooltip" />
	                                    <input type="button" class="da-tooltip-n da-button green" value="North Gravity" title="This is a tooltip" />
    	                                <input type="button" class="da-tooltip-ne da-button blue" value="North East Gravity" title="This is a tooltip" />
                                    </div>
                                    <div style="margin-bottom:1em;">                                    
	                                    <input type="button" class="da-tooltip-w da-button pink" value="West Gravity" title="This is a tooltip" />
    	                                <input type="button" class="da-tooltip-e da-button gray" value="East Gravity" title="This is a tooltip" />
                                    </div>                           
                                    <input type="button" class="da-tooltip-sw da-button orange" value="South West Gravity" title="This is a tooltip" />
                                    <input type="button" class="da-tooltip-s da-button pink" value="South Gravity" title="This is a tooltip" />
                                    <input type="button" class="da-tooltip-se da-button red" value="South East Gravity" title="This is a tooltip" />
                                </div>
                            </div>
                        </div>
                                              
                    </div>
                    
                </div>
                
            </div>
            
        </div>
        
        <!-- Footer -->
        <div id="da-footer">
        	<div class="da-container clearfix">
            	<p>Copyright 2012. Dandelion Admin. All Rights Reserved.
            </div>
        </div>
        
    </div>
    
</body>
</html>
